<!DOCTYPE html>
<#import "/spring.ftl" as spring />
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>TcpTester</title>

    <!-- Bootstrap core CSS -->
    <link href="<@spring.url '/static/bootstrap/css/bootstrap.min.css?v=1'/>" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<@spring.url '/static/css/starter-template.css'/>" rel="stylesheet">
    <style>
        .connent-status-success {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #0fff00;
            background-color: #0dd600;
            border-radius: 50%;

        }

        .connent-status-faild {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #ff0600;
            background-color: #e20019;
            border-radius: 50%;

        }

        .connent-status-disconnect {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #dedede;
            background-color: #acacac;
            border-radius: 50%;

        }

        #editor {
            width: 100%;
            height: 400px;
        }

        .tcp-server-resp {
            background-color: black;
            color: #00AA00;
            margin: 10px;
        }

        .data-tmpl {
            background-color: #cdd5dc;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top">
    <a class="navbar-brand" href="<@spring.url '/'/>">TcpTester</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="<@spring.url '/tcpTester'/>">TcpTester</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <a class="btn btn-outline-success my-2 my-sm-0" id="" href="javascript:void(0);" role="button">Search</a>
        </form>
    </div>
</nav>

<div class="container-fluid">
<#--添加服务器-->
    <div class="alert alert-success">
        <form class="form-inline">
            <label class="sr-only" for="study_number">IP</label>
            <input type="text" class="form-control" id="host" placeholder="host" name="host" value="">

            <label class="sr-only" for="tea_name">port</label>
            <input type="number" class="form-control" id="port" placeholder="port" name="port" value="">
            <a class="btn btn-primary" id="btn_add" href="javascript:void(0);" role="button">添加</a>
        </form>
    </div>


    <div class="row">
    <#--报文模板-->
        <div class="col-2 data-tmpl">
            <div class="list-group">
                <a href="#" class="list-group-item active disabled">自由话题呼叫老师</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-warning"
                   id="calling_freeTalk_student"><span class="badge badge-default badge-pill">1</span> student[主叫]</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-warning"
                   id="calling_freeTalk_wakeCalled"><span class="badge badge-default badge-pill">2</span>
                    wakeupCalled[主叫]</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-info"
                   id="calling_freeTalk_teacher"><span class="badge badge-default badge-pill">3</span> teacher(被叫)</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-info"
                   id="calling_freeTalk_wakeCallback"><span class="badge badge-default badge-pill">4</span>
                    wakeupCallback(被叫)</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-warning"
                   id="calling_freeTalk_cancel"><span class="badge badge-default badge-pill">5</span> cancel[主叫]</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-info"
                   id="calling_freeTalk_teacherRefuse"><span class="badge badge-default badge-pill">6</span>
                    teacherRefuse(被叫)</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-info"
                   id="calling_freeTalk_eceivingOrders"><span class="badge badge-default badge-pill">7</span>
                    eceivingOrders(被叫)</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-warning"
                   id="calling_freeTalk_endOrders"><span class="badge badge-default badge-pill">8</span>
                    endOrders[主叫]</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-info"
                   id="called_freeTalk_endOrders"><span class="badge badge-default badge-pill">9</span>
                    endOrders(被叫)</a>
            </div>
        </div>

        <div class="col-10">
            <div class="row">
                <div class="col-lg-auto" id="conn-container">

                </div>
            </div>
            <br/>
            <div class="row">
                <a class="btn btn-primary" id="btn_send" href="javascript:void(0);" role="button"> 发 送 </a>
                <div class="col">
                    <div id="editor">{"json":"填写json报文"}</div>
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col tcp-server-resp" id="tcpServerResponse">
                    <p>{"message":"这里会服务器响应的所有报文"}</p>
                </div>
            </div>
        </div>
    </div>


</div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<@spring.url '/static/jquery/jquery-3.2.1.min.js?v=1'/>"></script>
<script src="<@spring.url '/static/tether-1.3.3/js/tether.min.js'/>"></script>
<script src="<@spring.url '/static/bootstrap/js/popper.min.js'/>"></script>
<script src="<@spring.url '/static/bootstrap/js/bootstrap.min.js'/>"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="<@spring.url '/static/bootstrap/js/ie10-viewport-bug-workaround.js'/>"></script>
<script src="<@spring.url '/static/jquery/jquery.websocket.js?v=1'/>"></script>
<script src="<@spring.url '/static/jquery/json2.js'/>"></script>
<script src="<@spring.url '/static/template-web-4.12.1/template-web.js'/>"></script>
<script src="<@spring.url '/static/ace9/ace.js'/>" type="text/javascript" charset="utf-8"></script>

<#-- 初始化代码编辑器 -->
<script>
    var global_server_id = "";
    var editor = ace.edit("editor");
    editor.$blockScrolling = Infinity;
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/json");
    $(function () {
        $("#btn_send").click(function () {
            var data = editor.getValue();
            console.log(data);
            $.ajax({
                type: 'post',
                url: '<@spring.url '/server/send'/>',
                dataType: 'json',
                data: {"data": data, "serverId": global_server_id},
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                success: function (obj) {
                    console.log(obj);
                    if (obj.success) {

                    } else {
                        alert(obj.message);
                    }
                }
            });
        });
    });

    <#-- 报文 -->
    $(function () {
        // 1 student
        $("#calling_freeTalk_student").click(function () {
            // student :: 学生：13739199287
            var data = {
                "mustParams": {
                    "Timestamp": "1500390398",
                    "user_type": "1",
                    "token": "c2709719-78ee-4aab-9115-c44b9c255c55",
                    "client_type": "2",
                    "version": "11",
                    "SignInfo": "ca5660872017df274aa00a9c5a6632e8"
                }, "functionName": "student"
            };
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });

        // 2 wakeupCalled
        $("#calling_freeTalk_wakeCalled").click(function () {
            // 3474 yaa
            // 4616 Iva
            var data = {
                "params": {"user_id": "3474", "cou_id": "100"},
                "mustParams": {
                    "SignInfo": "703ec88333f400f6d5a8e0fd1a637920",
                    "user_type": "1",
                    "token": "c2709719-78ee-4aab-9115-c44b9c255c55",
                    "client_type": "2",
                    "Timestamp": "1500347036",
                    "version": "12"
                },
                "functionName": "wakeupCalled"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });

        // 3 teacher
        $("#calling_freeTalk_teacher").click(function () {
            var data = {
                "mustParams": {
                    "SignInfo": "0b45ecce73fae973aac363106706e439",
                    "user_type": "2",
                    "token": "1f3b2fb6-50e4-4bd0-a42d-005a187cfa82",
                    "client_type": "2",
                    "Timestamp": "1500364549",
                    "version": "12"
                }, "functionName": "teacher"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });

        // 4 wakeupCalled
        $("#calling_freeTalk_wakeCallback").click(function () {
            var data = {
                "params": {"stt_id": "11939"},
                "mustParams": {
                    "Timestamp": "1500390399",
                    "user_type": "2",
                    "token": "1f3b2fb6-50e4-4bd0-a42d-005a187cfa82",
                    "client_type": "2",
                    "version": "11",
                    "SignInfo": "84433a5fdb6fb68158f36c8da6f04b86"
                },
                "functionName": "wakeupCallback"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });

        // 5 cancel
        $("#calling_freeTalk_cancel").click(function () {
            var data = {
                "params": {"stt_id": "11939"},
                "mustParams": {
                    "Timestamp": "1500390399",
                    "user_type": "1",
                    "token": "c2709719-78ee-4aab-9115-c44b9c255c55",
                    "client_type": "2",
                    "version": "11",
                    "SignInfo": "84433a5fdb6fb68158f36c8da6f04b86"
                },
                "functionName": "cancel"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));
        });

        // 6 teacherRefuse
        $("#calling_freeTalk_teacherRefuse").click(function () {
            var data = {
                "params": {"stt_id": 11967},
                "mustParams": {
                    "SignInfo": "ac45db84cceaa28c310f88d6129be30a",
                    "user_type": "2",
                    "token": "1f3b2fb6-50e4-4bd0-a42d-005a187cfa82",
                    "client_type": "2",
                    "Timestamp": "1500364552",
                    "version": "12"
                },
                "functionName": "teacherRefuse"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });

        // 7 eceivingOrders
        $("#calling_freeTalk_eceivingOrders").click(function () {
            var data = {
                "params": {"stt_id": 11970},
                "mustParams": {
                    "SignInfo": "f6fbcbc15f0109e321bcc62c66aa2c0c",
                    "user_type": "2",
                    "token": "1f3b2fb6-50e4-4bd0-a42d-005a187cfa82",
                    "client_type": "2",
                    "Timestamp": "1500364720",
                    "version": "12"
                },
                "functionName": "eceivingOrders"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });

        // 8 endOrders(主叫)
        $("#calling_freeTalk_endOrders").click(function () {
            var data = {
                "params": {"stt_id": 11970},
                "mustParams": {
                    "SignInfo": "a6febe81212a2065a257aedb60497bcc",
                    "user_type": "1",
                    "token": "c2709719-78ee-4aab-9115-c44b9c255c55",
                    "client_type": "2",
                    "Timestamp": "1500364855",
                    "version": "11"
                },
                "functionName": "endOrders"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });

        // 8 endOrders(被叫)
        $("#called_freeTalk_endOrders").click(function () {
            var data = {
                "params": {"stt_id": 11970},
                "mustParams": {
                    "SignInfo": "3dbdf56aac24f35e1a2f63b7a830fd4e",
                    "user_type": "2",
                    "token": "1f3b2fb6-50e4-4bd0-a42d-005a187cfa82",
                    "client_type": "2",
                    "Timestamp": "1500364856",
                    "version": "12"
                },
                "functionName": "endOrders"
            }
            editor.setValue(JSON.stringify(data, null, '\t'));//将json对象格式显示到Ace编辑器上
        });


    });
</script>

<#-- html模板-->
<script id="tpl-tcpClientConnect" type="text/html">
    <div class="card">
        <div class="card-header" id="serverId_{{serverId}}">
            {{serverId}} -- {{serverHost}}:{{serverPort}}
            <button type="button" class="btn btn-primary" id="btnConn_{{serverId}}"> + 连 接</button>
        </div>
        <ul class="list-group list-group-flush" id="clients_{{serverId}}">
        </ul>
    </div>
</script>
<#-- html模板-->
<script id="tpl-tcpClientConnectItem" type="text/html">
    <li class="list-group-item list-group-item-success" id="clientId_{{clientId}}">
        <span class="connent-status-success"></span> {{clientName}}
        <button type="button" class="btn btn-outline-danger" id="btnConn_{{clientId}}"> 断开连接</button>
    </li>
</script>

<script>

    var WsSessionId = "";

    $(function () {
        // 添加一个服务器
        $("#btn_add").click(function () {
            var host = $("#host").val();
            var port = $("#port").val();
            $.ajax({
                type: 'post',
                url: '<@spring.url '/server/add'/>',
                dataType: 'json',
                data: {"host": host, "port": port, "wsSessionId": WsSessionId},
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                success: function (obj) {
                    console.log(obj);
                    if (obj.success) {
                        //console.log(data);
                        var serverId = obj.data.id;
                        global_server_id = serverId;
                        var _html = template('tpl-tcpClientConnect', {
                            serverId: serverId,
                            serverHost: host,
                            serverPort: port
                        });
                        $("#conn-container").append(_html);

                        //绑定连接事件，添加一个客户端连接
                        $("#btnConn_" + serverId).click(function () {
                            var _btn = $(this);
                            $.ajax({
                                type: 'post',
                                url: '<@spring.url '/client/connect'/>' + '/' + serverId,
                                dataType: 'json',
                                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                                success: function (obj) {
                                    console.log(obj);
                                    _btn.append(obj.success);
                                }
                            });
                        });
                    } else {
                        alert(obj.message);
                    }
                }
            });
        });
    });


    // WebSocket
    $(function () {
        var ws = $.websocket("ws://192.168.15.60:9082/TcpTester/myHandler", {
            open: function (e) {
                console.log("WebSocket open on 192.168.15.60:9082");
            },
            close: function (e) {
                console.log("WebSocket closed");
            },
            events: {
                event: function (e) {
                    console.log(e.data);
                    if (e.data.eventType == "connectFail") {
                        // tcp连接失败

                    } else if (e.data.eventType == "connectSuccess") {
                        // tcp连接成功，界面上添加新连接的客户端
                        var server = e.data.data;
                        var clients = server.clients;
                        for (i in clients) {
                            var client = clients[i];
                            var _item_html = template('tpl-tcpClientConnectItem', {
                                clientId: client.id,
                                clientName: client.name
                            });
                            $("#clients_" + server.id).append(_item_html);

                            // 绑定断开连接事件
                            $("#btnConn_" + client.id).click(function () {
                                $.ajax({
                                    type: 'post',
                                    url: '<@spring.url '/client/disconnect'/>' + '/' + global_server_id + '/' + client.id,
                                    dataType: 'json',
                                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                                    success: function (obj) {
                                        console.log(obj);
//                                        _btn.append(obj.success);
                                    }
                                });
                            });
                        }

                    } else if (e.data.eventType == "disconnect") {
                        // 断开连接
                        var clientId = e.data.data;
                        var item = $("#clientId_" + clientId);
                        item.removeClass("list-group-item-success").addClass("list-group-item-danger");
                        item.find("span").removeClass("connent-status-success").addClass("connent-status-disconnect");
                        item.find("button").remove();
                    }
                },
                text: function (e) {
                    $("#tcpServerResponse").prepend("<p>" + e.data + "</p>");
                },
                sessionId: function (e) {
                    console.log(e);
                    WsSessionId = e.data;
                }

            }
        });
        console.log(ws);
    });

</script>

</body>
</html>
